<template>
	<view class="content page" :style="{'--color': color,'--colors':colors}">
		<status-bar title='我的记录'></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="nav_top_box" :style="{top:navHeight+System.statusBarHeight+'px'}">
			<view class="navlists"  :class="navTab== 520?'navAction thmeColor':''" @click="navclick(520,0)"><text>全部</text></view>
			<view class="navlists"  :class="navTab==0?'navAction thmeColor':''" @click="navclick(0,1)"><text>待完成</text></view>
			
			<view class="navlists" :class="navTab==1?'navAction thmeColor':''" @click="navclick(1,2)"><text>已完成</text></view>
			
			<view class="Advertising_article thmeBg" :style="{'--color': color,left: 33.33 * positions+'%'}"></view>
		
		</view>
		
		<view class="discount_coupon_list">
			<view class="reList">
				<view class="reItem" v-for='(item,index) in pageData' :key='index'>
					<view class="d-flex j-sb" >
						<text class="reName">{{item.sncode_prize_name}}</text>
						<text class="reState" v-if='item.sncode_flag == 0' @click="getCode(item.sncode_sn,item.sncode_src,index,item.sncode_id)">待完成</text>
						<text class="reState" v-if='item.sncode_flag == 1'>已完成</text>
						<text class="reState" v-if='item.sncode_flag == 2'>未通过</text>
						<text class="reState" v-if='item.sncode_flag == 3'>审核中</text>
						<text class="reState" v-if='item.sncode_flag == 4'>已撤回</text>
						<view class="bgcolor white bor_radius_10" style="padding:6px 6px" 
						 v-if='item.sncode_flag == 5' 
						 @click.stop="nowPlay(item.sncode_id,item.jump_pay,item.jump_url)">待支付</view>
					</view>
					<view class="size26 m-top10 color_80" @click="showPop(item,1)">{{item.user_name}}</view>
					<view class="size26 m-top10 color_80" @click="showPop(item,1)">{{item.sncode_user_mobi}}</view>
					<view class="flex-box flex-between align-center " @click="showPop(item,1)">
						 <view class="row j-sb a-center">
							 <view class="reTime">{{item.sncode_addtime}}</view>
							 <u-rate :count="5" v-model="item.user_rating" gutter="1" readonly v-if="item.user_rating != 0"></u-rate>
						 </view>
						<view class="flex-box align-center">
							<view class="qxbtn" @click.stop="qxbtn(index,item.sncode_id)" v-if="item.sncode_flag == 0">撤回</view>
							<view class="qxbtn white btnConfig"  
							     v-if='item.sncode_flag == 0'>核销码</view>
						</view>
					</view>
				    
					<view class="row j-sb a-center  overload" v-if='item.sncode_flag == 1'>
						<view class="contnet d-flex f-column j-sb">
							<view class="rows ellipsis color_99" v-if="item.sncode_content">{{item.sncode_content}}</view>
							<text class="color_99 ">{{item.sncode_usedtime}}</text>
						</view>
						<view class="evaluation" @click="showPop(item,2)" v-if="item.user_rating == 0">服务评价</view>
					</view>
			
				</view>
			</view>
		</view>
		
		
		<!-- 提货码弹窗 start  @click="getCode(item.sncode_sn,item.sncode_src,index,item.sncode_id)"-->
		<view class="mask flex-box flex-center align-center" v-if="getCodes" @click="getCode1">
			<view @click.stop class="pickup_code_pop " >
				<view class="bgwhite bor_radius_10">
					<view class="pickup_code_box p-top20 p-bot20">
						<view class="txt">核销二维码</view>
						<image :src="$imgUrls(items.sncode_src)" class="code-img" mode="aspectFit"></image>
						<view class="num">{{items.sncode_number}}</view>
						<view class="info m-top10">到达活动现场后，出示该二维码核销。</view>
					</view>
					<view class="row f-column p-left50">
						<view class="row m-bot20" v-for="(item,index) in items.sncode_remark" :key="index">
							<view class="viewTitles">{{item.title}}</view>
							<view>：{{item.value}}</view>
						</view>
					</view>
				</view>
				
				<view @click="getCode1">
					<text class="iconfont icon-guanbi"></text>
				</view>
			</view>
		</view>
		
		
		
		<showModel v-if='showModal' @cancelFunc='showModal=false' type='99'
			@certain='delSure'
			title='是否确定取消预约？' 
			msg='  '
			btn1='点错了' 
			btn2='我很确定'></showModel>
		
		<empty v-if='nothing' type='1' cat='3' msg='还没有相关数据哦~'></empty>
		<view class="DiLine" v-if="showline">------ 我是有底线的 ------</view>
		
		
		<u-popup :show="show" @close="show = false" mode="center" closeable round="10">
			<view class="viewbox p-top20 p-bot30 popViewBox">
				<block  v-if="isState == 1">
					<view class="popcode auto d-flex f-column a-center">
						<image :src="$imgUrls(items.sncode_src)" class="codeImg" v-if="items.sncode_flag == 0"></image>
						<text class="size30 black bold">{{items.sncode_number}}</text>
					</view>
					<view class="row f-column p-left50 m-top20">
						<view class="row m-bot20" v-for="(item,index) in items.sncode_remark" :key="index">
							<view class="viewTitles">{{item.title}}</view>
							<view>：{{item.value}}</view>
						</view>
					</view>
					<view class="rows padding20" v-if="items.sncode_flag == 1">
						<view class="overStr overStrbg">
							<view class="color_99" v-if="items.sncode_content">{{items.sncode_content}}</view>
							<view class="color_99 m-top10">{{items.sncode_usedtime}}</view>
						</view>
					</view>
				</block>
				
				<view class="rows" v-if="isState == 2">
					<view class="rows padding20">
						<view class="overStr">
							<view class="color_99" v-if="items.sncode_content">{{items.sncode_content}}</view>
							<view class="color_99 m-top10">{{items.sncode_usedtime}}</view>
						</view>
					</view>
					<view class="row j-centert">
						<u-rate :count="count" v-model="rating" size="30" gutter="1"></u-rate>
					</view>
					
					<view class="rows padding20">
						<textarea v-model="evaluate" placeholder="请输入服务评价" class="textarea"/>
					</view>
					<view class="row j-centert m-top20">
						<view class="subMit flexac white" @click="subMit">提交评价</view>
					</view>
				</view>
				
				
				<view class="rows" v-if="isState == 3">
					<view class="row f-column p-left50 m-top20">
						<view class="row m-bot20" v-for="(item,index) in items.sncode_remark" :key="index">
							<view class="viewTitles">{{item.title}}</view>
							<view>：{{item.value}}</view>
						</view>
					</view>
					<view class="rows padding20">
						<view class="overStr overStrbg">
							<view class="color_99" v-if="items.sncode_content">{{items.sncode_content}}</view>
							<view class="color_99 m-top10">{{items.sncode_usedtime}}</view>
						</view>
					</view>
					
					
					<view class="row j-centert">
						<u-rate :count="5" v-model="items.user_rating" size="30" gutter="1" readonly ></u-rate>
					</view>
					
					<view class="row j-centert padding20">{{items.user_evaluate}}</view>
					
					<view class="row j-centert p-left20 color_99">{{$common.timeFormat(items.user_rating_time,'Y-M-D h:m:s')}}</view>
				</view>
				
				
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {mapState} from 'vuex';
	var timer,that;
	export default {
		data() {
			return {
				
				
				colors: getApp().globalData.color_aid,
				navTab: 520,
				positions:0,
				vid: '',
				Advertising_article_style: '',
				pageData: '',
				nothing: false,
				pageindex: 1,
				bottomtip: false,
				showline: false,
				toTop: false,
				
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				slideId: '', // 点开表单id
				getCodes: false, // 是否显示二维码弹窗
				codeImg: '',
				pickCode: '',
				qxindex: "", //取消预约按钮索引
				showModal: false,
				sncode_id:'',
				palyInfo:{},
				items:'',
				show:false,
				count:5,
				rating:2,
				evaluate:'',
				sncode_type:'',
				isState:1, // 1 未核销 2 未评价 3 已评价
			}
		},
		
		
		onBackPress() {
			clearInterval(timer);
		},
		onLoad(e) {
			that = this
			that.vid = uni.getStorageSync("vid");
			that.getPageData('', 0)
			
		},
		
		
		methods: {
			showPop(item,index){
				this.rating = 0;
				this.items = item;
				this.show = true;
				if(item.sncode_flag == 0 && item.user_rating == 0) return this.isState = 1;
				if(item.sncode_flag == 1 && item.user_rating == 0){
					if(index == 1) return this.isState = 1
					if(index == 2) return this.isState = 2
					
				} 
				if(item.sncode_flag == 1 && item.user_rating != 0) return this.isState = 3;
				
			},
			subMit(){
				if(this.rating == 0) return this.$Toast("请评价星数~");
				this.$http.post({
					url:'/zzj_singleSaleApi/evaluateOnlineOrder',
					data:{
						VeriCode:this.bid,
						sncode_id:this.items.sncode_id,
						evaluate:this.evaluate,
						rating:this.rating
					}
				}).then(res=>{
					this.show = false;
					if(res.code != 100) return this.$Toast(res.data);
					this.$Toast(res.data)
					this.getPageData(that.sncode_type,that.positions);
				})
				
			},
			nowPlay(sncode_id,pay,url){
				let that = this;
				if(pay == 1){
					window.open(res.url)
				}else{
					uni.showLoading({title:'加载中~',mask:true,})
					that.$http.post({
						url:'/accountPay/getSncodePay',
						data:{
							sncode_id:sncode_id,
						}
					}).then(res=>{
						if(res.code == '100'){
							that.palyInfo = res.data;
							uni.getProvider({
								service: 'payment',
								success(resp) {
									uni.requestPayment({
										provider:resp.provider[0],
										orderInfo:{sncode_id:sncode_id},
										timeStamp:that.palyInfo.timeStamp,
										nonceStr:that.palyInfo.nonceStr,
										package:that.palyInfo.package,
										signType:that.palyInfo.signType,
										paySign:that.palyInfo.paySign,
										success(re) {
											uni.showToast({
												title:'支付成功',
												mask:true,
												icon:'none',
												success() {
													setTimeout(()=>{
														uni.navigateBack({
															delta:1
														})
													},800)
												}
											})
										},
										fail(err) {
											uni.navigateBack({
												delta:1
											})
										}
									})
								}
							})
						}else{
							uni.showToast({
								title:res.msg,
								mask:true,
								icon:'none'
							})
						}
					})
				}				
			},
			
			
		
			
			prev(i,imgArry){
				if (imgArry) {
					let arr = [];
					for (let i in imgArry) {
						arr.push(that.imgUrl + imgArry[i])
					}
					uni.previewImage({
						current: i,
						urls: arr,
						indicator: "number",
						loop: true
					})
				}
			},
			getCode: function(item) {
				/**
				 * 获取提货码
				 * **/
				 
				that.getCodes = true;
				this.items = item;
				// that.pickCode = code;
				// that.codeImg = imgSrc;
				timer = null;
				timer = setInterval(function() {
					that.$http.post({
						url: '/SRA_CustomerForm/getCustomFormState',
						data: {
							sncode_id: sncodeid,
							v_id: that.vid,
							VeriCode: that.bid
						}
					}).then(res => {
						if(res.code != 100) return;
						that.getCodes = false;
						if (that.navTab == 520) { // 如果当前是全部订单则修改当前订单状态，其他状态则删除该条订单
							that.pageData[index].sncode_flag = res.data;
						} else {
							that.pageData.splice(index, 1)
							if (that.pageData.length < 1) {
								that.nothing = true
							}
						}
						that.pageData = [].concat(that.pageData)
						clearInterval(timer);
					})
				}, 2000)
			},
			getCode1() {
				that.getCodes = false;
				clearInterval(timer);
			},
			showSlide(id) {
				if (that.slideId == id) {
					that.slideId = -1
				} else {
					that.slideId = id;
				}
			},
			navclick(i, positions) {
				var param = i;
				that.sncode_type = i;
				that.navTab = i;
				that.slideId = -1
				if (i == 520) {
					param = '';
					that.sncode_type = ''
				}
				that.pageindex = 1
				that.bottomtip = false
				that.showline = false
				that.positions = positions
				that.getPageData(param, 0)
			},
			getPageData(status, type) {
				that.$http.post({
					url: '/zzj_singleSaleApi/getCustomFormList',
					data: {
						jsCode: that.vid,
						sncode_type: status, // 状态 0待审核 1已完成 2审核未通过
						page: that.pageindex,
						size: 10,
						VeriCode: that.bid
					}
				}).then(res => {
					if(res.code != 100) return;
					const data = res.data.formList?res.data.formList:[];
					if(!data.length){
						that.nothing = true
						if(that.pageindex == 1) that.pageData = []
						return
					}
					data.forEach((item, index) => {
						if (item.sncode_remark.length > 0) {
							item.sncode_remark.forEach((sn, i) => {
								if (sn.value.indexOf('/Uploads') > -1 && sn.value.indexOf('.') > -1) {
									sn.isImg = true
								}
							})
						}
					})
					that.nothing = false
					this.pageindex == 1?that.pageData = data:that.pageData = [...that.pageData,...data]
					if(!data.length || data.length < 10)  that.bottomtip = false;
					
					
					uni.hideLoading()
				})
			},
			delSure() {
				that.$http.post({
					url: '/zzj_singleSaleApi/cancelOnlineOrder',
					data: {
						VeriCode: that.bid,
						sncode_id: that.sncode_id,
						v_id: that.vid
					}
				}).then(res => {
					if (res.code == 100) {
					  uni.showToast({
					  	icon:"none",
						title: res.data
					  })
					  that.showModal = false
					  if (that.navTab == 520) { // 如果当前是全部订单则修改当前订单状态，其他状态则删除该条订单
					  	that.pageData[that.qxindex].sncode_flag = 1;
					  } else {
					  	that.pageData.splice(that.qxindex, 1)
					  	if (that.pageData.length < 1) {
					  		that.nothing = true
					  	}
					  }
					}
					if (res.code == 101) {
					  uni.showToast({
					  	icon: "none",
						title: res.data
					  })
					}
				})
			},
			// 取消预约按钮
			qxbtn(index ,sncode_id) {
				that.qxindex = index
				that.sncode_id = sncode_id
				that.showModal = true
			},
		},
		
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','share','bid']),
		},
		onReachBottom() {
			if (that.bottomtip) {
				uni.showLoading({
					mask: true,
					title: "列表加载中..."
				})
				that.pageindex = that.pageindex + 1;
				that.getPageData(that.navTab, 1)
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},
	}
</script>

<style scoped lang="scss">
	.page{
		background-color: #F8F8F8;
		.pickup_code_pop{
			position: relative;
			width: 600upx;
			
			padding-top: 30rpx;
			.pickup_code_box{
				width: 100%;
				height: 100%;
				.txt{
					text-align: center;
					padding: 10upx 0;
					font-size: 32upx;
				}
				.code-img{
					width: 440upx;
					height: 440upx;
					display: block;
					margin: 20rpx auto;
					background-color: #F8F8F8;
				}
				.num{
					text-align: center;
					font-size: 32rpx;
					color: #00A4EE;
				}
				.info{
					font-size: 20upx;color: #888888;
					text-align: center;
				}
			}
			.icon-guanbi{
				color: white;
				font-size: 60rpx;
				top: 20rpx;
				position: relative;
				z-index: 3;
			}
		}
	}

	.nav_top_box {
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		display: flex;
		line-height: 80upx;
		text-align: center;
		font-size: 28upx;
		color: #888888;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.navlists {
		width: 33.33%;
	}

	.navAction {
		position: relative;
	}

	.Advertising_article {
		width: 33.33%;
		height: 4upx;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: left .2s;
	}

	.discount_coupon_list {
		width: 100%;
		padding-top: 80upx;
	}

	.expire {
		font-size: 20upx;
	}

	.reItem {
		background: white;
		margin-top: 20upx;
		padding: 24upx 30upx;
	}

	.reName {
		color: #3A3A3A;
		font-size: 32upx;
	}

	.reTime {
		color: #888888;
		font-size: 28upx;
		line-height: 65upx;
	}

	.qxbtn {
		line-height: 46rpx;
		text-align: center;
		background-color: #F5F5F5;
		padding: 0 20rpx;
		width: 130rpx;
		margin-left: 20rpx;
		border-radius: 50rpx;
	}   
	.btnConfig{
		background-color: var(--color);
	}
	.reState {
		float: right;
		color: #888888;
		font-size: 28upx;
	}

	.reTip {
		font-size: 20upx;
		color: #3A3A3A;
		margin-top: 20upx;
		position: relative;
		border-top: 2upx solid #E2E2E2;
		padding-top: 20upx;
	}

	.tipTime {
		color: #888888;
		font-size: 20upx;
		margin-top: 10upx;
	}

	.reArrow {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateX(-50%);
		width: 23upx;
		height: 12upx;
		transition: all .3s;
	}

	.reMsg {
		height: 0;
		overflow: hidden;
		box-sizing: border-box;
		transition: all .3s;
		border-top: 1px solid transparent;
	}

	.slideShow {
		height: auto;
		transition: all .3s;
		border-top: 1px solid #E2E2E2;
		margin-top: 20upx;
	}

	.trRotate {
		transform: rotate(180deg);
		transform-origin: 6upx 6upx;
		transition: all .3s;
	}

	.reMsg>view {
		display: flex;
		margin-top: 20upx;
	}

	.msgName {
		color: #8D8D8D;
		font-size: 24upx;
		min-width: 140upx;
		text-align: right;
	}
	.img-box{
		flex-wrap: wrap;
		width: 100%;
		padding-top: 10rpx;
		.msgImg {
			width: 150rpx;
			height: 150rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
	}

	

	.msgDetail {
		color: #3A3A3A;
		font-size: 24upx;
		flex: 1;
	}
	.viewTitles{
		width:120rpx;
		text-align-last: justify;
	}
	.overload{
		background-color:rgba(255, 204, 153, 0.3);
		padding:16rpx 10rpx;
		border-radius: 8rpx;
	}
	.evaluation{
		background-color: var(--color);
		padding:10rpx 20rpx;
		border-radius: 30rpx;
		color:#ffffff;
	}
	.popViewBox{
		max-height: 1100rpx;
		overflow: scroll;
	}
	.contnet{
		width:500rpx;
	}
	.popcode{
		width:500rpx;
		
	}
	.codeImg{
		width:500rpx;
		height: 500rpx;
		display: block;
	}
	.overStr{
		// background-color:rgba(255, 204, 153, 0.3);
		padding:16rpx 10rpx;
		border-radius: 8rpx;
	}
	.overStrbg{
		background-color:rgba(255, 204, 153, 0.3);
	}
	.textarea{
		width:100%;
		height: 200rpx;
		border:1px solid #cccccc;
		border-radius: 10rpx;
		padding:10rpx;
		font-size:24rpx;
	}
	.subMit{
		width:320rpx;
		height: 80rpx;
		background-color: var(--color);
		border-radius: 40rpx;
		font-size:26rpx;
	}
</style>
